<template>
	<view class="container">
		<!-- 服务流程 -->
		<view class="step">
			<view class="stepItem">
				<text class="stepInfo">预约<br />服务</text>
			</view>
			<text class="dashed"> </text>
			<view class="stepItem">
				<text class="stepInfo">支付<br />订单</text>
			</view>
			<text class="dashed"> </text>
			<view class="stepItem">
				<text class="stepInfo">门店<br />服务</text>
			</view>
		</view>
		<!-- 订单数据 -->
		<view class="orderData">
			<!-- 店铺信息 -->
			<view class="carShop">
				<uni-icons type="shop" size="24" color="1D6FFF"></uni-icons>
				<view class="shopIntro">
					<view class="shopName">
						伟业汽车美容店
					</view>
					<view class="shopAddress">
						山阳区人民中路32号
					</view>
				</view>
			</view>
			<view class="userIntro">
				<uni-icons type="person-filled" color="1D6FFF" size="24"></uni-icons>
				<view class="userName">
					张三
				</view>
				<view class="userPhone">
					18384758695
				</view>
			</view>
			<view class="selectCar">
				<image src="/static/car.png" style="width: 24px;height: 24px;"></image>
				<view class="carMessage">
					奔驰FWE4/豫A98FHJ
				</view>
				<navigator url="/pages/selectCar/selectCar">
					<uni-icons type="arrowright" size="24" style="margin-right: 10px;"></uni-icons>
				</navigator>
			</view>
			<!-- 服务产品信息 -->
			<view class="serviceMessage">
				<view class="serviceProduct">
					<text class="productTitle">服务产品</text>
					<text class="productCount">共选择
						<text class="blue-number">1</text>
						项服务产品</text>
				</view>
				<view class="serviceType">
					<text class="typeName">精洗汽车</text>
					<text class="typePrice">￥ 199</text>
				</view>
			</view>
			<!-- 优惠券信息 -->
			<view class="selectCar">
				<image src="/static/coupon.png" style="width: 24px;height: 24px;"></image>
				<view class="carMessage">
					代金券/优惠券
				</view>
				<view class="couponPrice">
					-10元
				</view>
				<navigator url="/pages/selectCar/selectCar">
					<uni-icons type="arrowright" size="24" style="margin-right: 10px;"></uni-icons>
				</navigator>
			</view>
		</view>
		<view class="floating-bar">
			<view class="icon-text" @click="toggle('bottom')">
				<uni-icons type="headphones" size="22" /> <!-- 耳机图标 -->
				<text class="text">联系客服</text>
			</view>
			<view class="totalPrice">
				<text class="priceView">合计：
					<text class="priceItem">￥ 30.50</text>
				</text>
			</view>
			<text class="action-btn" @click="placeOrder">立即下单</text>
		</view>

		<!-- 联系客服的弹窗 -->
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content" v-if="popupType === 'contact'">
					<view class="phone">
						18338350145
					</view>
					<view class="call">
						呼叫
					</view>
					<view class="cancle" @click="closePopup">
						取消
					</view>
				</view>
				<view class="popupIfPay" v-if="popupType === 'confirmPayment'">
					<view class="popup-text">
						确定支付吗？
					</view>
					<view class="popup-actions">
						<view class="popup-action-btn" @click="confirmPayment">
							确认支付
						</view>
						<view class="popup-cancle-btn" @click="cancelPayment">
							取消
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				list1: [{
					title: '预约服务'
				}, {
					title: '支付订单'
				}, {
					title: '门店服务'
				}],
				popupType: '', // 添加一个变量来控制弹窗类型
			}
		},
		methods: {
			placeOrder() {
				// 显示确认支付的弹窗
				this.popupType = 'confirmPayment';
				this.$refs.popup.open();

			},
			change() {
				if (this.active < this.list1.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			},
			toggle(type) {
				this.popupType = type; // 设置弹窗类型
				this.$refs.popup.open(type);
			},
			showPopup() {
				// 显示弹窗
				this.$refs.popup.open();
			},
			closePopup() {
				// 关闭弹窗
				this.$refs.popup.close();
			},
			confirmPayment() {
				uni.navigateTo({
					url: '/pages/carWash/orderPay/orderPay'
				})
			},
			cancelPayment() {
				// 用户点击取消支付按钮后执行的方法
				this.$refs.popup.close(); // 关闭弹窗
			}
		}
	}
</script>

<style>
	.container {
		background-color: #FFFFFF;
		min-height: 100vh;
		/* 设置最小高度为视口的高度 */
	}

	/* 服务流程 */
	.step {
		text-align: center;
	}

	.stepItem {
		border: 1rpx solid #CCCCCC;
		width: 88rpx;
		height: 88rpx;
		text-align: center;
		border-radius: 100%;
		display: inline-block;
		vertical-align: middle;

	}

	.stepInfo {
		display: inline-block;
		line-height: 34rpx;
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-left: 5rpx;
	}

	.dashed {
		display: inline-block;
		width: 112rpx;
		height: 0;
		border-top: 2rpx dashed #CCCCCC;
		margin-left: 10rpx;
		margin-right: 10rpx;
		vertical-align: middle;

	}




	/* 订单数据 */
	.orderData {
		margin-left: 40rpx;
		margin-top: 30rpx;
	}

	/* 店铺信息 */
	.carShop {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: flex-start;
		/* 水平开始对齐 */
	}

	/* 店铺图标 */
	.uni-icons {
		margin-right: 20rpx;
		/* 图标右侧间距 */
		color: #1D6FFF;
	}

	/* 店铺介绍 */
	.shopIntro {
		display: flex;
		flex-direction: column;
	}

	/* 店铺名称 */
	.shopName {
		width: 280rpx;
		height: 40rpx;
		font-size: 28rpx;
		/* 字体大小 */
		font-weight: bold;
		/* 字体加粗 */
	}

	/* 店铺地址 */
	.shopAddress {
		width: 222rpx;
		height: 34rpx;
		font-size: 24rpx;
		/* 字体大小 */
		color: #101010;
		/* 字体颜色 */
	}

	/* 用户信息 */
	.userIntro {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 调整为两端对齐 */
		margin-bottom: 20rpx;
		margin-top: 46rpx;
	}

	/* 用户图标 */
	.userIntro .uni-icons {
		margin-right: 20rpx;
	}

	/* 用户名称 */
	.userName {
		font-size: 28rpx;
		flex-grow: 1;
		/* 使用户名占据剩余空间 */
	}

	/* 用户电话 */
	.userPhone {
		font-size: 28rpx;
		color: #101010;
		text-align: right;
		margin-right: 60rpx;
	}

	/* 选择车辆 */
	.selectCar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.carMessage {
		margin-left: 20rpx;
		font-size: 28rpx;
		height: 40rpx;
		flex-grow: 1;
	}

	/* 服务产品信息 */
	.serviceMessage {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
	}

	/* 服务产品标题 */
	.serviceProduct {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.productTitle {
		font-weight: bold;
		margin-left: 12rpx;
	}

	/* 服务产品数量 */
	.productCount {
		color: #101010;
		margin-right: 40rpx;
	}

	/* 蓝色数字 */
	.blue-number {
		color: #1D6FFF;
	}

	/* 服务类型 */
	.serviceType {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	/* 服务类型名称 */
	.typeName {
		font-size: 28rpx;
		margin-left: 24rpx;
	}

	/* 服务类型价格 */
	.typePrice {
		color: #1D6FFF;
		font-weight: bold;
		margin-right: 80rpx;
	}

	/* 底部 */
	.floating-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
		flex-direction: row;
		justify-content: flex-end;
	}

	.icon-text {
		margin-right: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.text {
		font-weight: bold;
		font-size: 28rpx;
		width: 112rpx;
		height: 40rpx;
	}

	.totalPrice {
		width: 202rpx;
		height: 54rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
		text-align: right;
		margin-top: 24rpx;
	}

	.priceItem {
		color: #F44444;
	}

	.action-btn {
		padding: 20rpx 40rpx;
		color: #fff;
		border-radius: 10rpx;
		background-color: #F44444;
	}

	/* 联系客服弹窗 */
	.popup-content {
		height: 300rpx;
		background-color: #fff;
		z-index: 9999;
	}

	.popup-content>view {
		font-weight: 700;
		height: 196rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1rpx solid #efefef;
	}

	/* 下单确认弹框 */
	.popupIfPay {
		width: 600rpx;
		height: 400rpx;
	}

	.popup-text {
		color: #F44444;
		font-size: 40rpx;
		margin: 80rpx 0 40rpx 190rpx;
	}

	.popup-actions {
		height: 260rpx;
		justify-content: space-around;
		/* 使按钮分散对齐 */
	}

	.popup-action-btn,
	.popup-cancle-btn {
		flex-grow: 1;
		padding: 20rpx;
		text-align: center;
		border: 2rpx solid #1D6FFF;
		/* 设置按钮边框 */
		border-radius: 12rpx;
		/* 设置按钮圆角 */
		margin: 0 10rpx;
		/* 设置按钮之间的间距 */
		width: 340rpx;
		margin-left: 120rpx;
		font-weight: bold;
	}

	.popup-action-btn {
		margin-bottom: 40rpx;
		background-color: #1D6FFF;
	}

	.popup-cancle-btn {
		background-color: #F44444;
	}
</style>